<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <div class="logo-img">
          <img
            src="../assets/heima.png"
            alt=""
          >
          <span>电商后台管理系统
          </span>
        </div>
        <el-button
          @click="logout"
          type="info"
          size="mini"
        >退出</el-button>

      </el-header>
      <el-container>
        <el-aside :width="collapse?'64px':'200px'">
          <div
            @click="arrowHandle"
            class="arrow"
          >|||</div>
          <el-menu
            :collapse-transition="false"
            :collapse="collapse"
            :default-active="defaultActive"
            active-text-color="#ff0000"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            :router="true"
            background-color="#333744"
            text-color="#fff"
          >
            <el-submenu
              :index="'/'+index"
              v-for="(item, index) in menList"
              :key="index"
            >
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <i
                  style="margin-right:10px"
                  :class="['iconfont',iconObj[index]]"
                ></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item-group>

                <el-menu-item
                  @click="itemHandle(item2.path)"
                  :index="'/'+item2.path"
                  v-for="(item2, index2) in item.children"
                  :key="index2"
                ><i class="el-icon-menu"></i>{{item2.authName}}</el-menu-item>
              </el-menu-item-group>

            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
           
<script>
import { menus_api } from '@/api'
export default {
  data() {
    return {
      menList: [],
      //  字体图标 类名集合
      iconObj: {
        0: 'icon-user',
        1: 'icon-tijikongjian',
        2: 'icon-shangpin',
        3: 'icon-danju',
        4: 'icon-baobiao'
      },
      //  默认展开哪一项
      defaultActive: window.localStorage.getItem('defaultActive') || 'users',
      //  控制菜单栏收起还是打开
      collapse: false
    }
  },
  methods: {
    //  给二级绑定点击事件
    itemHandle(path) {
      console.log(path, 111111)
      //  需要点击后做两件事
      /* 
      1-将获取的path赋值给defaultActive
      2-将这个值做本地缓存   localStorage
      3-data中的defaultActive  初次进入或者刷新的时候  从本地缓存中拿，如果本地缓存有值就直接拿，没值的话就取默认值 users
      */
      this.defaultActive = path
      window.localStorage.setItem('defaultActive', path)
    },
/* 退出
1-清除本地缓存
2-跳转至login
*/
    logout() {
      window.sessionStorage.removeItem('token')
      this.$router.push({path:'/login'})
    },

    //  获取左侧菜单函数
    async getMenus() {
      //const res = await menus_api()
      const { data: res1 } = await menus_api()
      console.log(res1, 66666)
      //this.menList=res.data.data
      this.menList = res1.data
    },
    //  控制菜单栏收起还是打开
    arrowHandle() {
      this.collapse = !this.collapse
    }
  },
  created() {
    // 获取左侧菜单数据
    this.getMenus()
  }
}
</script>
<style scoped lang='less'>
.home-container {
  > .el-container {
    width: 100%;
    height: 100%;
    .el-header {
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      background-color: #373d41;
      .logo-img {
        display: flex;
        align-items: center;

        span {
          color: #fff;
          font-size: 20px;
          margin-left: 20px;
        }
      }

      .el-button {
        height: 40px;
        margin: 10px 0;
        font-size: 15px;
      }
    }
    .el-container {
      flex: 1;
      .el-aside {
        .arrow {
          background-color: #4a5064;
          font-size: 10px;
          line-height: 24px;
          color: #fff;
          text-align: center;
          letter-spacing: 0.2em;
          cursor: pointer;
        }
        background-color:#333744;
        .el-menu {
          border: none;
        }
      }

      .el-main {
        background-color: #eaedf1;
      }
    }
  }
}
</style>